<template>
    <div class="todo-item">
        <div class="card">
          <div class="card-content" :class="{'completed-class': completed}">
           <div class="content" :title="title">
            {{ title }}
           </div>
          </div>
          <footer class="card-footer">
            <a href="/" class="card-footer-item" @click.prevent="handleToggle">{{ completed ? '未' : '已' }}完成</a>
            <a href="/" class="card-footer-item" @click.prevent="handleRemove">删除</a>
          </footer>
        </div>
    </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: { // props 也可以使用对象，实现属性的验证
    id: Number,
    title: {
      type: String,
      default: '待办事项'
    },
    completed: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    handleRemove() {
      // 调用 eventBus 的 $emit 方法，触发事件，传递待删除的 id
      this.$bus.$emit('remove', this.id)
    },
    handleToggle() {
      this.$bus.$emit('toggle', this.id)
    }
  },
  filters: { // 自定义过滤器
    state: function(val) {
      return val ? '已完成' : '未完成'
    }
  }
}
</script>

 <style lang="scss" scoped>
 .completed-class {
    background: #eaeaea;
    text-decoration: line-through;
  }
  .content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
 </style>
